<template>
    <van-sidebar style="margin-left: -10px;margin-top: -30px;margin-bottom: -15px;">
        <van-sidebar-item title="商品详情" style="font-size: 14px;"/>
    </van-sidebar>
    <van-col style="margin-left: -10px;margin-right: -10px;">
        <van-cell-group>
            <van-cell title="规格参数" icon="label-o" class="border" />
            <van-cell title="商品编号：" class="border">
                <template #value>
                    <span>{{ goodsInfo.id }}</span>
                </template>
            </van-cell>
            <van-cell title="商品类型：" class="border">
                <template #value>
                    <span>{{ goodsInfo.type }}</span>
                </template>
            </van-cell>
            <van-cell title="商品名称：" class="border">
                <template #value>
                    <span>{{ goodsInfo.name }}</span>
                </template>
            </van-cell>
            <van-cell title="详细信息" icon="notes-o" class="border" />
            <van-cell title="商品描述：" class="border">
                <template #value>
                    <span>{{ goodsInfo.production }}</span>
                </template>
            </van-cell>
            <van-cell title="卖家名称" icon="shop-o" class="border" />
            <van-cell title="卖家：" class="border">
                <template #value>
                    <span>{{ goodsInfo.sellerName }}</span>
                </template>
            </van-cell>
            <van-cell title="品牌：" class="border">
                <template #value>
                    <span>{{ goodsInfo.brand }}</span>
                </template>
            </van-cell>
            <van-cell title="商品成色" icon="star-o" class="border" />
            <van-cell title="新旧程度：" class="border">
                <template #value>
                    <span>{{ goodsInfo.extent }}</span>
                </template>
            </van-cell>
            <van-cell title="上架时间" icon="todo-list-o" class="border" />
            <van-cell title="时间：" class="border">
                <template #value>
                    <span>{{ goodsInfo.listTime }}</span>
                </template>
            </van-cell>
        </van-cell-group>
    </van-col>
    <van-col class="background">
        <p>物流公告：</p>
        <van-text-ellipsis rows="10" :content="text" />
    </van-col>
    <van-col class="background">
        <p>温馨提示：</p>
        <van-text-ellipsis rows="10" :content="warn" />
    </van-col>
    <van-col class="background">
        <van-row>
            <van-space :align="align">
                <van-icon name="smile-o" />
                <p>服务</p>
            </van-space>
        </van-row>
        <van-divider>售后服务</van-divider>
        <van-text-ellipsis rows="10" :content="service" />
    </van-col>
</template>  
<script setup>
import http from '@/utils/request.js'; //{default as htpp}
import { onMounted } from 'vue';
import { ref, reactive ,defineProps} from 'vue';
import { useRoute, useRouter } from 'vue-router'; //路由器
const route = useRoute();   //获取路由对象
const align = ref('center');
const text = '亲爱的用户你好！产品具体发货时间以实际订单为准。对于部分地区订单未发货或延迟发货，我们正全力协调物流保障，尽快将产品送达您的手中。以上不可控因素希望您理解，订单详情可咨询在线客服，再次感谢您的理解与支持。';
const warn = '本产品仅限在中国大陆境内销售、激活和维保，如您计划在中国大陆以外的地区购买本产品或遇到异常，请咨询销售商。';
const service = '本商品质保期为1周年，在此时间范围内可提交维修申请，具体以商家服务为准。如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日换货，15日以上在保质期内享受免费保修等三包服务！';
const props = defineProps(['goodsId']);
const goodsId = props.goodsId;
console.log('goodsId = ', goodsId);
let goodsInfo = reactive({
    id: '',
    name: '',
    brand: '',
    type: '',
    money: '',
    extent: '',
    production: '',
    sellerName: '',
    listTime: '',
})
//获取商品信息
const getGoodsInfo = function () {
    http.get('/user/goods/' + route.params.goodsId).then((res) => {
        console.log('查询到的商品信息：', res.data);
        goodsInfo.id = res.data.data.goodsId;
        goodsInfo.name = res.data.data.goodsName;
        goodsInfo.brand = res.data.data.brand;
        goodsInfo.type = res.data.data.goodsType;
        goodsInfo.money = res.data.data.price;
        goodsInfo.extent = res.data.data.quality;
        goodsInfo.production = res.data.data.details;
        goodsInfo.sellerName = res.data.data.sellerName;
        goodsInfo.listTime = res.data.data.listTime;
    });
}
onMounted(() => {
    getGoodsInfo();
})

</script>
<style scoped>
.border {
    border-style: solid;
    border-width: 1px;
}
.background {
    background-color: whitesmoke;
    margin: 10px -10px;
    border-radius: 10px;
    padding: 10px 10px;

}
</style>